<template>
  <div class="songsForm">
    <!-- 歌曲表格 -->
    <div class="songsForm_table">
      <el-table
        :data="songs"
        stripe
        style="width: 100%"
        @cell-click="clickCell"
      >
        <el-table-column type="index" label="#" width="50"> </el-table-column>
        <el-table-column label="操作" width="150"> </el-table-column>
        <el-table-column
          prop="title"
          label="音乐标题"
          width="200"
        ></el-table-column>
        <el-table-column class="singer" prop="singer" label="歌手">
        </el-table-column>
        <el-table-column prop="album" label="专辑" width="300">
        </el-table-column>
        <el-table-column prop="time2" label="时长" width="150">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapState } from "vuex";
export default {
  data() {
    return {
      keyWord: "",
    };
  },
  watch:{
    // 这里深度监视songs，监视并处理一下time的格式
    // computed 的数据只读不能改，但是我这里修改的对象里面的数据，监视不到我的修改
    // songs:{
    //   deep:true,
    //   handler(newValue,oldValue){
    //     newValue.forEach(item => {
    //       item.time = ((item.time/1000)/60).toFixed(2) +'分'
    //     });
    //   }
    // }
  },
  computed: {
    ...mapState(["playlist"]),
    ...mapGetters(["songs"]),
  },

  methods: {
    // 点击表格中的行，自己打印出来看比较好
    // row：一行的数据
    // column：一列的组件配置
    // cell：点击的dom元素
    // event：触发的事件
    clickCell(row, column, cell, event) {
      // row里面是vuex通过getter返回来的整个对象，包括没有展示的id
      // console.log(row);
      // TODO:  接下来是播放

      // 向Footer组件传row.id（歌曲的id）
      this.$bus.$emit('getSongId',row)
    },

    comments() {
      console.log(123);
      const id = sessionStorage.getItem("SONGFORMID");
      this.$router.push(`/songDetail/comments?id=${id}`);
    },
    songList() {
      const id = sessionStorage.getItem("SONGFORMID");
      this.$router.push(`/songDetail/songList?id=${id}`);
    },
  },
};
</script>

<style lang="less">
.songsForm {
  margin: 5px;
  .songsForm_top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .songsForm_top_left {
      width: 40%;
      display: flex;
      justify-content: space-around;
      span {
        cursor: pointer;
      }
    }
    .songsForm_top_right {
      display: flex;
      width: 30%;
    }
  }
}

// 表单顶部导航样式
.songsForm_top_left_active {
  color: #c62f2f;
  border-bottom: 5px solid #c62f2f;
}

.el-table__row {
  height: 10px;
  overflow: hidden;
}

// 设置表格每行的高度
tbody .cell {
  height: 20px;
  overflow: hidden;
}

.songsForm_table {
  border-top: 1px solid #e1e1e2;
}
</style>